<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Docker镜像服务测试页面</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 15px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            overflow: hidden;
        }

        .header {
            background: linear-gradient(135deg, #2196F3 0%, #21CBF3 100%);
            color: white;
            padding: 30px;
            text-align: center;
        }

        .header h1 {
            font-size: 2.5em;
            margin-bottom: 10px;
        }

        .header p {
            font-size: 1.1em;
            opacity: 0.9;
        }

        .controls {
            padding: 30px;
            background: #f8f9fa;
            border-bottom: 1px solid #e9ecef;
        }

        .button-group {
            display: flex;
            gap: 15px;
            justify-content: center;
            flex-wrap: wrap;
        }

        .btn {
            padding: 12px 24px;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-block;
        }

        .btn-primary {
            background: #007bff;
            color: white;
        }

        .btn-success {
            background: #28a745;
            color: white;
        }

        .btn-warning {
            background: #ffc107;
            color: #212529;
        }

        .btn-secondary {
            background: #6c757d;
            color: white;
        }

        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }

        .btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
        }

        .loading {
            text-align: center;
            padding: 40px;
            font-size: 18px;
            color: #666;
        }

        .spinner {
            border: 4px solid #f3f3f3;
            border-top: 4px solid #3498db;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
            margin: 0 auto 20px;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .results {
            padding: 30px;
        }

        .stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }

        .stat-card {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 10px;
            text-align: center;
            border-left: 4px solid #007bff;
        }

        .stat-number {
            font-size: 2em;
            font-weight: bold;
            color: #007bff;
        }

        .stat-label {
            color: #666;
            margin-top: 5px;
        }

        .services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px;
        }

        .service-card {
            background: white;
            border: 1px solid #e9ecef;
            border-radius: 10px;
            padding: 20px;
            transition: all 0.3s ease;
        }

        .service-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        }

        .service-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }

        .service-name {
            font-weight: bold;
            font-size: 1.1em;
        }

        .status-badge {
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 0.85em;
            font-weight: 600;
            text-transform: uppercase;
        }

        .status-fast {
            background: #d4edda;
            color: #155724;
        }

        .status-fair {
            background: #fff3cd;
            color: #856404;
        }

        .status-slow {
            background: #f8d7da;
            color: #721c24;
        }

        .status-error {
            background: #f5c6cb;
            color: #721c24;
        }

        .service-details {
            color: #666;
            font-size: 0.9em;
        }

        .response-time {
            font-weight: bold;
            color: #007bff;
        }

        .error-message {
            color: #dc3545;
            font-style: italic;
            margin-top: 10px;
        }

        .timestamp {
            text-align: center;
            color: #666;
            margin-top: 20px;
            font-size: 0.9em;
        }

        .debug-info {
            background: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 5px;
            padding: 10px;
            margin-top: 10px;
            font-family: monospace;
            font-size: 0.8em;
            white-space: pre-wrap;
            max-height: 200px;
            overflow-y: auto;
        }

        @media (max-width: 768px) {
            .button-group {
                flex-direction: column;
            }

            .services-grid {
                grid-template-columns: 1fr;
            }

            .stats {
                grid-template-columns: repeat(2, 1fr);
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🐳 Docker镜像服务测试</h1>
            <p>使用第三方ping API检测Docker镜像加速服务网络延迟 - 快速(&lt;100ms) | 一般(100-200ms) | 较慢(&gt;200ms)</p>
        </div>

        <div class="controls">
            <div class="button-group">
                <button class="btn btn-primary" onclick="quickCheck()">
                    ⚡ 快速检测 (前10个)
                </button>
                <button class="btn btn-success" onclick="checkAll()">
                    🔍 完整检测 (所有服务)
                </button>
                <button class="btn btn-warning" onclick="testSingle()">
                    🎯 测试单个服务
                </button>
                <button class="btn btn-secondary" onclick="quickCheckDebug()">
                    🐛 调试模式
                </button>
            </div>
        </div>

        <div id="loading" class="loading" style="display: none;">
            <div class="spinner"></div>
            <div>正在检测服务，请稍候...</div>
        </div>

        <div id="results" class="results" style="display: none;">
            <div id="stats" class="stats"></div>
            <div id="services" class="services-grid"></div>
            <div id="timestamp" class="timestamp"></div>
        </div>
    </div>

    <script>
        const API_URL = './api.php';

        function showLoading() {
            document.getElementById('loading').style.display = 'block';
            document.getElementById('results').style.display = 'none';
            // 禁用所有按钮
            document.querySelectorAll('.btn').forEach(btn => btn.disabled = true);
        }

        function hideLoading() {
            document.getElementById('loading').style.display = 'none';
            // 启用所有按钮
            document.querySelectorAll('.btn').forEach(btn => btn.disabled = false);
        }

        function displayResults(data) {
            document.getElementById('results').style.display = 'block';
            
            // 显示统计信息
            if (data.stats) {
                displayStats(data.stats, data.check_time_ms);
            }
            
            // 显示服务列表
            displayServices(data.data);
            
            // 显示时间戳
            document.getElementById('timestamp').textContent = 
                `检测时间: ${data.timestamp} ${data.cached ? '(缓存数据)' : ''}`;
        }

        function displayStats(stats, checkTime) {
            const statsHtml = `
                <div class="stat-card">
                    <div class="stat-number">${stats.total}</div>
                    <div class="stat-label">总服务数</div>
                </div>
                <div class="stat-card">
                    <div class="stat-number">${stats.fast || 0}</div>
                    <div class="stat-label">快速响应</div>
                </div>
                <div class="stat-card">
                    <div class="stat-number">${stats.fair || 0}</div>
                    <div class="stat-label">一般响应</div>
                </div>
                <div class="stat-card">
                    <div class="stat-number">${stats.slow || 0}</div>
                    <div class="stat-label">响应较慢</div>
                </div>
                <div class="stat-card">
                    <div class="stat-number">${stats.error || 0}</div>
                    <div class="stat-label">连接失败</div>
                </div>
                <div class="stat-card">
                    <div class="stat-number">${checkTime}ms</div>
                    <div class="stat-label">检测耗时</div>
                </div>
            `;
            document.getElementById('stats').innerHTML = statsHtml;
        }

        function displayServices(services) {
            const servicesHtml = services.map(service => `
                <div class="service-card">
                    <div class="service-header">
                        <div class="service-name">${service.name}</div>
                        <div class="status-badge status-${service.status}">${getStatusText(service.status)}</div>
                    </div>
                    <div class="service-details">
                        <div><strong>提供商:</strong> ${service.provider}</div>
                        <div><strong>地址:</strong> ${service.url}</div>
                        <div><strong>响应时间:</strong> <span class="response-time">${service.responseTime}ms</span></div>
                        ${service.method ? `<div><strong>检测方法:</strong> ${service.method}</div>` : ''}
                        ${service.ip ? `<div><strong>IP地址:</strong> ${service.ip}</div>` : ''}
                        ${service.server ? `<div><strong>服务器:</strong> ${service.server}</div>` : ''}
                        ${service.httpCode ? `<div><strong>HTTP状态:</strong> ${service.httpCode}</div>` : ''}
                        ${service.error ? `<div class="error-message">错误: ${service.error}</div>` : ''}
                        ${service.debug_ping ? `
                            <div class="debug-info">
                                <strong>Ping API调试:</strong><br>
                                ${JSON.stringify(service.debug_ping, null, 2)}
                            </div>
                        ` : ''}
                        ${service.debug_output ? `
                            <div class="debug-info">
                                <strong>命令调试:</strong><br>
                                命令: ${service.debug_cmd}<br>
                                返回码: ${service.debug_return_code || 0}<br>
                                输出: ${JSON.stringify(service.debug_output, null, 2)}
                            </div>
                        ` : ''}
                    </div>
                </div>
            `).join('');
            document.getElementById('services').innerHTML = servicesHtml;
        }

        function getStatusText(status) {
            const statusMap = {
                'fast': '快速',
                'fair': '一般',
                'slow': '较慢',
                'error': '失败'
            };
            return statusMap[status] || status;
        }

        async function quickCheck() {
            showLoading();
            try {
                const response = await fetch(`${API_URL}?action=quick_check`);
                const data = await response.json();
                if (data.success) {
                    displayResults(data);
                } else {
                    alert('检测失败: ' + data.error);
                }
            } catch (error) {
                alert('网络错误: ' + error.message);
            } finally {
                hideLoading();
            }
        }

        async function quickCheckDebug() {
            showLoading();
            try {
                const response = await fetch(`${API_URL}?action=quick_check&debug=1`);
                const data = await response.json();
                if (data.success) {
                    displayResults(data);
                } else {
                    alert('检测失败: ' + data.error);
                    if (data.debug) {
                        console.log('调试信息:', data.debug);
                    }
                }
            } catch (error) {
                alert('网络错误: ' + error.message);
            } finally {
                hideLoading();
            }
        }

        async function checkAll() {
            showLoading();
            try {
                const response = await fetch(`${API_URL}?action=check_all`);
                const data = await response.json();
                if (data.success) {
                    displayResults(data);
                } else {
                    alert('检测失败: ' + data.error);
                }
            } catch (error) {
                alert('网络错误: ' + error.message);
            } finally {
                hideLoading();
            }
        }

        async function testSingle() {
            const url = prompt('请输入要测试的Docker镜像服务URL:', 'https://docker.mirrors.ustc.edu.cn');
            if (!url) return;

            showLoading();
            try {
                const response = await fetch(`${API_URL}?action=check_service`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ url: url })
                });
                const data = await response.json();
                if (data.success) {
                    // 显示单个服务结果
                    displayResults({
                        data: [data.data],
                        stats: { total: 1, [data.data.status]: 1 },
                        timestamp: data.data.timestamp,
                        check_time_ms: data.data.responseTime
                    });
                } else {
                    alert('检测失败: ' + data.error);
                }
            } catch (error) {
                alert('网络错误: ' + error.message);
            } finally {
                hideLoading();
            }
        }

        // 页面加载完成后自动执行快速检测
        window.addEventListener('load', function() {
            setTimeout(quickCheck, 500);
        });
    </script>
</body>
</html>
